/**
 * 设备链接设置
 * @author xiaoxujs
 */

import { useCallback, useEffect, useState } from "react";
import { DeviceLinkSettingsBox, DeviceLinkSettingsBoxLeft, DeviceLinkSettingsBoxRight, IpBgBox, ShijianBgBox, StateInfoItemBox, StateInfoItemRightBox, SuidiBgBox, WeijiBgBox, XintiaoBgBox } from "./style";
import { ISyhtSonnectionQuery } from "../../../type/ConfigManagement/DeviceLinkSettings/api";
import { getSyhtSonnectionQuery } from "../../../api/ConfigManagement/DeviceLinkSettingsApi";
import SetModule from "./components/SetModule";

const DeviceLinkSettings = () => {
    const [detailsData, setDetailsData] = useState<ISyhtSonnectionQuery>();
    const [setModuleShow, setSetModuleShow] = useState(false); // 设置弹窗
    const detailsFun = useCallback(
        async () => {
            const { code, msg, data } = await getSyhtSonnectionQuery() as { code: number, msg: string, data: ISyhtSonnectionQuery };
            if (code === 200) {
                setDetailsData(data);
            } else {
                console.log(msg)
            }
        },
        [],
    )
    useEffect(() => {
        detailsFun();
    }, [detailsFun])

    return (
        <DeviceLinkSettingsBox>
            <DeviceLinkSettingsBoxLeft>
                <div className="title">
                    状态信息
                    <div className="shezhi_box" onClick={() => setSetModuleShow(true)} >设置</div>
                </div>
                <div className="neirong">
                    <div className="neirong_left">
                        <div className="neirong_left_button">
                            {detailsData && detailsData.serviceStatus ? '开启' : '关闭'}
                        </div>
                        <div className="xinxi_box">
                            <div className="gongdian_style"></div>
                            <div className="xinxi_text">上位机服务</div>
                        </div>
                    </div>
                    <div className="neirong_right">
                        <div className="neirong_right_ceng">
                            <StateInfoItemBox>
                                <div className="state_info_item_left"><IpBgBox /></div>
                                <div className="state_info_item_right">
                                    <div className="state_info_item_right_title">下位机IP地址</div>
                                    <div className="state_info_item_right_value">{detailsData && detailsData.plcHost}</div>
                                </div>
                            </StateInfoItemBox>
                            <div className="gun"></div>
                            <StateInfoItemBox>
                                <div className="state_info_item_left"><SuidiBgBox /></div>
                                <div className="state_info_item_right">
                                    <div className="state_info_item_right_title">上位机单次处理字节数</div>
                                    <div className="state_info_item_right_value">{detailsData && detailsData.byteSize}</div>
                                </div>
                            </StateInfoItemBox>
                        </div>
                        <div className="neirong_right_ceng">
                            <StateInfoItemBox>
                                <div className="state_info_item_left"><WeijiBgBox /></div>
                                <div className="state_info_item_right">
                                    <div className="state_info_item_right_title">上位机端口号</div>
                                    <div className="state_info_item_right_value">{detailsData && detailsData.hmiPort}</div>
                                </div>
                            </StateInfoItemBox>
                            <div className="gun"></div>
                            <StateInfoItemBox>
                                <div className="state_info_item_left"><WeijiBgBox /></div>
                                <div className="state_info_item_right">
                                    <div className="state_info_item_right_title">下位机端口号</div>
                                    <div className="state_info_item_right_value">{detailsData && detailsData.plcPort}</div>
                                </div>
                            </StateInfoItemBox>
                        </div>
                    </div>
                </div>
            </DeviceLinkSettingsBoxLeft>
            <DeviceLinkSettingsBoxRight>
                <div className="title">状态信息</div>
                <div className="neirong_right_ceng">
                    <div className="neirong_left">
                        <div className="neirong_left_button">
                            {detailsData && detailsData.isConnected ? '通信建立' : '通信未建立'}
                        </div>
                        <div className="xinxi_box">
                            <div className="gongdian_style"></div>
                            <div className="xinxi_text">当前与设备通信状态</div>
                        </div>
                    </div>
                    <div className="gun"></div>
                    <div>
                        <StateInfoItemRightBox>
                            <div className="state_info_item_left"><XintiaoBgBox /></div>
                            <div className="state_info_item_right">
                                <div className="state_info_item_right_title">最近心跳时间</div>
                                <div className="state_info_item_right_value">{detailsData && detailsData.lastHeartbeatTime}</div>
                            </div>
                        </StateInfoItemRightBox>
                        <StateInfoItemRightBox>
                            <div className="state_info_item_left"><ShijianBgBox /></div>
                            <div className="state_info_item_right">
                                <div className="state_info_item_right_title">最近校时时间</div>
                                <div className="state_info_item_right_value">{detailsData && detailsData.lastTimingTime}</div>
                            </div>
                        </StateInfoItemRightBox>
                    </div>

                </div>

            </DeviceLinkSettingsBoxRight>
            <SetModule open={setModuleShow} onClose={() => {
                setSetModuleShow(false)
                detailsFun()
            }} changeData={detailsData} />
        </DeviceLinkSettingsBox>
    )
}

export default DeviceLinkSettings;